<template>
  <div id="register-page">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top-4)+'px'
    }">
      <div id="back-button"  @click="$router.back()">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>可可商城找回密码</span>
    </div>
    <div class="top-box">
      <div id="logo-box">
        <img src="/static/logo.png" style="width: 80%;" alt="">
      </div>
      <div class="c"></div>
    </div>
    <el-form class="form register-form able-select" label-width="90px":model="form" :rules="rules" size="medium" ref="ruleForm">
      <el-form-item label="手机号" prop="username">
        <el-col :span="18">
          <el-input
            placeholder="请输入 手机号"
            v-model.number="form.username"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="18">
          <el-input
            type="password"
            placeholder="请输入 密码"
            v-model="form.password"
            @keyup.enter.native="submit"
            :maxlength="30"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="确认密码" prop="password">
        <el-col :span="18">
          <el-input
            type="password"
            placeholder="请输入 确认密码"
            v-model="form.rePassword"
            @keyup.enter.native="submit"
            :maxlength="30"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="验证码" prop="mobileVerifyCode">
        <el-col :span="14">
          <el-input
            placeholder="请输入 手机验证码"
            v-model="form.mobileVerifyCode"
            @keyup.enter.native="submit"
            :maxlength="6"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="8">
          <send-sms :get-mobile="getMoblie" event-type="resetPassword"/>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" style="width: 80%; margin-top: 20px;" @click="submit" :loading="isLoading">确认重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import SendSms from "../common/SendSms";

export default {
  name: "ResetPassword",
  components: {SendSms},
  mounted: function () {
    if (typeof this.CurrUser.IsLogin === 'function' && this.CurrUser.IsLogin()) {
      this.$router.push('/')
    }
    // 非开发环境,清除数据
    if (process.env.NODE_ENV === 'development') {
      // this.form.username = 'liuxh'
      // this.form.password = 'a123456'
    }

  },
  data: function () {
    return {
      isLoading: false,
      form: {
        username: '',
        password: '',
        rePassword: '',
        mobileVerifyCode: ''
      },
      rules: {
        username: [
          {validator: this.checkMobile, trigger: ['blur','change']},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: ['blur','change']},
          {min: 6,max:30, message: '密码长度在 6~30 之间', trigger: ['blur','change']}
        ],
        rePassword: [
          {required: true, message: '请输入确认密码', trigger: ['blur','change']},
          {min: 6,max:30, message: '确认密码长度在 6~30 之间', trigger: ['blur','change']}
        ],
        mobileVerifyCode: [
          {required: true, message: '请输入 验证码', trigger: ['blur','change']},
          {min: 6, max: 6, message: '验证码 填写错误', trigger: ['blur','change']}
        ]
      }
    }
  },
  methods: {
    // 提交
    submit: function () {
      var $this = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var params = $this.form
          if (params.password!=params.rePassword){
            return $this.$message.error("密码/确认密码 输入不一致")
          }
          params.mobile=params.username
          $this.isLoading = true
          $this.MyRequest($this.ApiDoNameMember+'Public/resetPassword', params, function (data) {
            $this.isLoading = false
            $this.$message.success("重置成功")
            setTimeout(function () {
              $this.$router.push({
                name: 'Login'
              })
            },500)
          }, function (msg) {
            $this.isLoading = false
            $this.$message.error(msg)
            // $this.form.password = ''
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    register: function () {
      this.$alert('请联系向: 623862474@qq.com 发送邮件进行注册。')
    },
    getMoblie: function () {
      return this.form.username
    }
  }
}
</script>

<style scoped>

</style>
